<template>
  <div>
    <!-- 提示信息 -->
    <div v-if="visible" :class="['toast', type]">
      {{ message }}
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      visible: false, // 是否显示提示信息
      type: '', // 提示类型（success、error等）
      message: '' // 提示文本
    };
  },
  methods: {
    show (type, message, time) {
      console.log("🚀 ~ file: index.vue:21 ~ show ~ type, message, time:", type, message, time)
      this.type = type;
      this.message = message;
      this.visible = true;

      // 2秒后隐藏提示信息
      setTimeout(() => {
        this.hide();
      }, time);
    },
    hide () {
      this.visible = false;
      this.type = '';
      this.message = '';
    }
  }
};
</script>

<style scoped>
.toast {
  position: fixed;
  top: 10%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 10px 20px;
  border-radius: 4px;
  color: #fff;
  font-size: 16px;
  text-align: center;
  z-index: 9999;
}

.success {
  background-color:#F0F9EB;
  color: #3AB179;
}

.error {
  background-color: #fef0f0;
  color: red;
}
</style>
